<template>
  <div class="indexContainer">
    <v-head></v-head>
    <div class="banner">
      <img src="../../../static/images/banner.png">
    </div>
    <div class="container">
      <div class="index_menu">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              <router-link to="Products">
                <img src="../../../static/images/mill.jpg">
                <p>Products</p>
              </router-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <router-link to="AsiaCases">
                <img src="../../../static/images/fangan.jpg">
                <p>Solutions</p>
              </router-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <router-link to="/solution/different">
                <img src="../../../static/images/xianchang.jpg">
                <p>Case</p>
              </router-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <router-link to="Service">
                <img src="../../../static/images/fuwu.jpg">
                <p>Service</p>
              </router-link>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="index_news">
        <div>
          <el-row>
            <el-col :span="2">
              <div class="grid-content iconNews">
                <img src="../../../static/images/message.png">
              </div>
            </el-col>
            <el-col :span="20">
              <div class="grid-content">
                <router-link :to="'/News/' + (indeNews.id)">
                  <p>{{ indeNews.title }}</p>
                </router-link>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content">
                <i class="el-icon-arrow-right"></i>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <section class="indexProducts">
        <h3>Hot Products</h3>
        <el-row :gutter="20">
          <el-col :span="12" v-for="item in indexProducts" :key="item.productsT">
            <router-link :to="item.href">
              <div class="grid-content">
                <img :src="item.img">
                <p>{{item.productsT}}</p>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </section>
      <section class="indexSolutions">
        <h3>Solutions</h3>
        <el-row :gutter="20">
          <el-col :span="24" v-for="item in indexSolution" :key="item.title">
            <router-link :to="item.href">
              <div class="grid-content">
                <p>{{item.title}}</p>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </section>
      <section class="indexCases">
        <div class="caseTitle clearfix">
          <h3 class="floatLeft">Classic case</h3>
          <div class="more floatRight">
            <router-link to="AsiaCases">More>></router-link>
          </div>
        </div>
        <div class="indexCasesList">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="AsiaCases">Asia ></router-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="NorthAmericaCases">North America ></router-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="EuropeCases">Europe ></router-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="AfricaCases">African ></router-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="LatinAmericaCases">Latin America ></router-link>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <router-link to="OceaniaCases">Oceania ></router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
    </div>
    <!-- <remote-js src="//drt.zoosnet.net/JS/LsJS.aspx?siteid=DRT25665959&float=1&lng=en"></remote-js> -->
  </div>
</template>
<script>
import vHead from '@/components/common/Header.vue'
import axios from 'axios'
export default {
  components: {
    vHead
  },
  data () {
    return {
      index: '我是首页',
      indexSolution: [
        { title: 'Aggregate crushing plant', href: '/solution/different' },
        { title: 'Artificial sand making plant', href: '/solution/sand-making' },
        { title: 'Grinding plant', href: '/solution/grinding_plant' },
        { title: 'Ore beneficiation plant', href: '/solution/ore-beneficiation' }
      ],
      indeNews: '',
      indexProducts: [
        {
          img: '../../../static/images/Mobile-Crushers.jpg',
          productsT: 'Mobile Crushers',
          href: '/products/Mobile-Crusher'
        },
        {
          img: '../../../static/images/Stationary-Crushers.jpg',
          productsT: 'Stationary Crushers',
          href: '/products/Crushing-Plant'
        },
        {
          img: '../../../static/images//Grinding-Mill.jpg',
          productsT: 'Grinding Mill',
          href: '/products/Grinding-MIll'
        },
        {
          img: '../../../static/images/Washing-Screening.jpg',
          productsT: 'Washing & Screening',
          href: '/products/Screening-Washing'
        }
      ]
    }
  },
  mounted () {
    axios.get('/news/spec/industry').then(response => {
      this.indeNews = response.data.data.newsspec[0]
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {}
}
</script>
<style scoped lang="sass">
p
  font-size: 1.4rem
.index_menu
  margin-top: 0.5rem
  .el-col-6
    a
      color: #444
      img
        max-width: 100%
        border-radius: 50%
        display: block
        margin: 0 auto
      p
        text-align: center
        margin: 0.5rem 0 0.5rem 0
.index_news
  padding: 22px 10px
  background: #eee
  a
    color: #444
    font-size: 1.4rem
    p
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
  .iconNews
    line-height: 4rem
    img
      width: 24px
      height: 24px
      vertical-align: middle
  .el-icon-arrow-right
    font-size: 2rem
    vertical-align: middle
    line-height: 4rem
.indexContainer
  padding: 52px 0 0px 0
  width: 100%
  .banner
    img
      width: 100%
.container
  h3
    text-align: center
    font-size: 1.6rem
  .indexProducts
    margin-top: -10px
    .el-col-12
      a
        color: #333
        img
          width: 100%
          max-width: 100%
        p
          text-align: center
          line-height: 150%
          font-size: 1.4rem
  .indexSolutions
    border-top: 10px solid #f6f6f8
    .el-col-24
      margin-bottom: 10px
      .grid-content
        background: #585858
        padding: 10px 0
        padding-left: 1rem
        p
          color: #fff
          font-size: 1.4rem
          text-align: left
          margin: 0
  .indexCases
    border-top: 10px solid #f6f6f8
    .caseTitle
      padding: 10px 0
      border-bottom: 1px solid #c0c4cc
      h3
        margin: 0
        border-left: 3px solid #db3f28
        padding-left: 0.5rem
      a
        font-size: 1.4rem
        color: #999
    .indexCasesList
      background-color: #db3f28
      padding: 1rem 1rem
      .el-col-12
        margin-bottom: 1rem
        a
          font-size: 1.6rem
          display: block
          color: #fff !important
          padding: 0.8rem 1rem
</style>
